<template>
  <div>
    <div
      class="content"
      @touchstart.stop="handletouchstart"
      @touchmove.stop="handletouchmove"
      @touchend.stop="handletouchend"
    >
      <div class="cell"  :style="styleObject">
        <span>
          <img src="../assets/pic.jpg" alt="" />
        </span>
        <span>今晚回家吃饭</span>
        <span>13:25</span>
      </div>
      <div class="read">
        <span>标记已读</span>
      </div>
      <div class="delete">
        <span>删除</span>
      </div>
    </div>
    <div class="content">
      <span>
        <img src="../assets/pic.jpg" alt="">
      </span>
      <span>今晚回家吃饭</span>
      <span>13:25</span>
    </div>
    <div class="content">
      <span>
        <img src="../assets/pic.jpg" alt="">
      </span>
      <span>今晚回家吃饭</span>
      <span>13:25</span>
    </div>
    <div class="content">
      <span>
        <img src="../assets/pic.jpg" alt="">
      </span>
      <span>今晚回家吃饭</span>
      <span>13:25</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "wechat",
  data() {
    return {
      startTx: 0, //初始距离
      endTx: 0, // 结束后的距离
      distance: 0, // 滑动距离 初始距离减去结束距离
      startMarginLeft: 0, // 开始滑动时候盒子距离左边的距离
      marginLeft:0 , //实际的滑动距离
    };
  },
  computed:{
    styleObject() {
      return {
         marginLeft: this.marginLeft  + 'px'
      }
    }
  },
  methods: {
    handletouchstart(e) {
      console.log(e);
      this.startTx = e.touches[0].clientX; //初始的位置
      this.startMarginLeft = this.marginLeft
    },
    handletouchmove(e) {
      this.endTx = e.changedTouches[0].clientX; // 结束的位置
      this.distance = this.startTx - this.endTx; // 滑动的距离
      if (this.marginLeft==-120 && this.distance>0) {
        return
      }
      this.marginLeft = this.startMarginLeft - this.distance // “信息详情”的margin-left值
      // console.log(this.distance)
      // console.log(e);
    },
    handletouchend(e) {
      if (this.marginLeft > -60) { // margin-left大于-60px则收起
        this.marginLeft = 0
      } else{
        this.marginLeft = -120 // 否则展开
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  display: flex;
  align-items: center;
  height: 70px;
  // justify-content: space-between;
  border-bottom: 1px solid #ededed;
  overflow: hidden;
  .cell {
    width: 100%;
    flex-shrink: 0;
    display: flex;
  align-items: center;
  padding: 0;
  height: 70px;
  justify-content: space-between;
  }
  .read {
    width: 80px;
  background-color: #ccc;
  display: flex;
  // align-items: center;
  height: 70px;
  span {
    width: 0;
    // font-size: 25px;
    font-size: 18px;
    line-height: 70px;
    // display: flex;
  white-space: nowrap;
  }
  }
  .delete {
    height: 70px;
     width: 40px;
  background-color: red;
  display: flex;
  // align-items: center;
  
  span {
    line-height: 70px;
    width: 0;
    font-size: 18px;
  white-space: nowrap;

  }
  }
}
img {
  width: 50px;
  height: 50px;
}
span {
  font-size: 18px;
}
</style>